<template>
  <div class="demo-drawer__content" ref="componentsWrap">
    <el-form ref="componentFrom" :model="form" label-width="70px" :disabled="isDisabled">
      <el-form-item label="节点名称">
        <common-input v-model="form.name" placeholder="请输入"></common-input>
      </el-form-item>
    </el-form>
    <common-table
        class="common-table-list"
        :data="form.dataList"
        ref="commonTable"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        isInputTable>
      <el-table-column
          type="selection"
          width="55"
          align="center"
          :selectable="checkSelectable"
      />
      <el-table-column
          label="字段名称"
          align="left"
          prop="fieldName"
          show-overflow-tooltip
          width="200"/>
      <!--      <el-table-column label="字段类型" align="left" prop="fieldType" show-overflow-tooltip>-->
      <!--        &lt;!&ndash;        <template slot-scope="scope">&ndash;&gt;-->
      <!--        &lt;!&ndash;          <el-select v-model="scope.row.fieldType" placeholder="请选择">&ndash;&gt;-->
      <!--        &lt;!&ndash;            <el-option&ndash;&gt;-->
      <!--        &lt;!&ndash;              v-for="item in fieldType"&ndash;&gt;-->
      <!--        &lt;!&ndash;              :key="item.value"&ndash;&gt;-->
      <!--        &lt;!&ndash;              :label="item.value"&ndash;&gt;-->
      <!--        &lt;!&ndash;              :value="item.value"&ndash;&gt;-->
      <!--        &lt;!&ndash;            ></el-option>&ndash;&gt;-->
      <!--        &lt;!&ndash;          </el-select>&ndash;&gt;-->
      <!--        &lt;!&ndash;        </template>&ndash;&gt;-->
      <!--      </el-table-column>-->

      <el-table-column label="描述" align="left" prop="describe">
        <template slot-scope="scope">
          <common-input
              v-model="scope.row.fieldDescribe"
              placeholder="请输入"
              :disabled="isDisabled"
              @blur="handleBlur"
          ></common-input>
        </template>
      </el-table-column>
    </common-table>
  </div>
</template>

<script>
import {
  inputOutputFields,
  getTableField,
  getApiFieldByUrl
} from '@/api/screenConfig/dataSet'
import { transformFieldType } from '@/utils'
import { deepClone } from '@/utils'

export default {
  name: 'FieldConfig',
  components: {},
  props: {
    option: {
      type: Object,
      default: () => {}
    },
    variableConfig: {
      type: Array,
      default: () => []
    },
    isDisabled: {
      type: Boolean,
      default: () => false
    },//是否可编辑
  },
  data() {
    return {
      form: {
        name: '',
        dataList: []
      },
      fieldType: [
        {
          value: 'string'
        },
        {
          value: 'number'
        },
        {
          value: 'date'
        }
      ],
      initDataList: [],
      tempDataSourceId: '',
      tempParams: null,
      loading: false,
      rowSelectFlag: false,
      complete: false,
      // paramsData: null,
      // isFirst: false
    }
  },
  watch: {
    option: {
      handler: function(val) {
        this.form.name = this.option.name
        //临时存储数据
        this.initDataList = this.option.dataList.length && deepClone(this.option.dataList)
      },
      deep: true,
      immediate: true
    },
    form: {
      handler: function(val) {
        this.$emit('changeForm', val, this.complete)
      },
      deep: true
    }
  },
  methods: {
    //根据前一个节点数据获取表字段
    getConfigData(data) {
      let params,
          type = data.type
      if(type === 'APIInput') {
        params = data.option
      } else {
        params = {
          id: data.option.dataSourceId,
          mysqlParamVo: {
            dataSql: data.option.sql,
            variableConfigs: this.variableConfig
          }
        }
      }
      this.getTableFieldForInput(params, type).then(res => {
        this.form.dataList = res.rows.reduce((r, c) => {
          let item = {
            ...c,
            isCheck: true
          }
          if (JSON.stringify(params) === this.tempParams || !this.tempParams) {
            let data = this.initDataList.length ? this.initDataList.find(d => d.fieldName === c.fieldName) : ''
            if (data) {
              Reflect.ownKeys(item).forEach(k => item[k] = data[k])
            }
          }
          r.push(item)
          return r
        }, [])
        //设置表格选中状态
        this.rowSelectFlag = true
        this.$nextTick(() => {
          this.form.dataList.forEach(f => {
            this.$refs.commonTable.$refs.table.toggleRowSelection(f, f.isCheck)
          })
          this.rowSelectFlag = false
        })
        this.tempParams = JSON.stringify(params)
        this.complete = true
      }).catch(() => this.form.dataList = []).finally(() => this.loading = false)
    },
    //获取字段配置数据
    getTableFieldForInput(params, type) {
      this.complete = false
      this.loading = true
      if(type === 'APIInput') {
        return new Promise((resolve, reject) => {
          getApiFieldByUrl(params).then(res => {
            if (res && res.code === 200) {
              resolve(res)
            } else {
              reject()
            }
          }).catch(() => reject())
        })
      } else {
        return new Promise((resolve, reject) => {
          getTableField(params).then(res => {
            if(res && res.code === 200) {
              resolve(res)
            } else {
              reject()
            }
          }).catch(() => reject())
        })
      }
    },
    //列表选中事件
    handleSelectionChange(val) {
      if (this.rowSelectFlag) {
        return
      }
      this.form.dataList.map(v => {
        v.isCheck = val.findIndex(f => f.fieldName === v.fieldName) > -1
      })
      this.initDataList = deepClone(this.form.dataList)
    },
    handleBlur() {
      this.initDataList = deepClone(this.form.dataList)
    },
    //重置
    resetForm(type) {
      if(type === 'FieldConfig') {
        this.form.list = []
      }
    },
    //是否禁选
    checkSelectable() {
      return !this.isDisabled
    },
  },
  mounted() {
    // this.form.name = this.option.name
    // //临时存储数据
    // this.initDataList = this.option.dataList.length && deepClone(this.option.dataList)
  }
}
</script>

<style scoped lang="scss">
.demo-drawer__content {
  height: calc(100% - 16px);
  width: 100%;
  padding: 0 16px 16px 16px;

  .common-table-list {
    height: calc(100% - 32px) !important;
  }
}
</style>
